<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no    ">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/detail.css">
    <title>detail</title>
</head>

<body>
    <!-- header -->
    <header class="clearfix">
        <!-- <div class="logo fl"><img src="./img/logo.png" alt=""></div> -->
        <div class="back_button fl">
            <a href="./index.html"><p>Back</p></a>
        </div>

        <div class="starBar fr">
            <img src="./img/detail/star.png" alt="" class="img_processing">
        </div>

        <div class="nameBar">
            <p>产品详细</p>
        </div>

    </header>

    <!-- #main -->
    <div id="main">
        <!-- food part -->
        <div class="food_part">
            <div class="food_img"><img src="./img/detail/produc.jpg" alt=""></div>
            <div class="food_info clearfix">
                <div class="food_cost fl"><p>￥32</p></div>
                <div class="button fr"><p>购买</p></div>
            </div>
            <div class="evaluation clearfix">
                <div class="e_percentage clearfix fl">
                    <div class="fl"><img src="./img/detail/star.png" alt="" class="img_processing"></div>
                    <p class="title_text fl">好评度 <em>99%</em> </p>
                </div>
                <div class="e_sum fr">
                    <p class="title_text">共605个评价></p>
                </div>
            </div>
        </div>

        <!-- shop part -->
        <div class="shop_part">
            <!-- shop title -->
            <div class="shop_title clearfix">
                <p class="title_text fl">适用商户</p>
                <p class="title_text arrow fr"> &gt; </p>
            </div>
            <!-- shop area zhengjia -->
            <div class="shop_area clearfix">
                <!-- shop img -->
                <div class="shop_img fl">
                    <img src="./img/detail/food3.png" alt="" class="img_processing">
                </div>
                <!-- shop info -->
                <div class="shop_info fr clearfix">
                    <div class="shop_info_l fl">
                        <p class="title_text">万岁寿司（正佳店）</p>
                        <div class="star_level clearfix">
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <p class="title_text fr">10分</p>
                        </div>
                        <div class="distance">
                            <p class="title_text">离你100m</p>
                        </div>
                        <div class="look_for_detail">
                            <p class="title_text">查看详情 >></p>
                        </div>

                    </div>

                    <div class="button fr">
                        <p>进入</p>
                    </div>
                    
                </div>
            </div>
            <!-- shop area tiyuxi   -->
            <div class="shop_area clearfix">
                <!-- shop img -->
                <div class="shop_img fl">
                    <img src="./img/detail/food4.png" alt="" class="img_processing">
                </div>
                <!-- shop info -->
                <div class="shop_info fr clearfix">
                    <div class="shop_info_l fl">
                        <p class="title_text">万岁寿司（体育西店）</p>
                        <div class="star_level clearfix">
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <p class="title_text fr">10分</p>
                        </div>
                        <div class="distance">
                            <p class="title_text">离你100m</p>
                        </div>
                        <div class="look_for_detail">
                            <p class="title_text">查看详情 >></p>
                        </div>

                    </div>

                    <div class="button fr">
                        <p>进入</p>
                    </div>
                    
                </div>
            </div>
            <!-- shop area changgang   -->
            <div class="shop_area clearfix">
                <!-- shop img -->
                <div class="shop_img fl">
                    <img src="./img/detail/food5.jpg" alt="" class="img_processing">
                </div>
                <!-- shop info -->
                <div class="shop_info fr clearfix">
                    <div class="shop_info_l fl">
                        <p class="title_text">万岁寿司（昌岗店）</p>
                        <div class="star_level clearfix">
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <div class="star fl"><img src="./img/detail/star.png" alt="" ></div>
                            <p class="title_text fr">10分</p>
                        </div>
                        <div class="distance">
                            <p class="title_text">离你100m</p>
                        </div>
                        <div class="look_for_detail">
                            <p class="title_text">查看详情 >></p>
                        </div>

                    </div>

                    <div class="button fr">
                        <p>进入</p>
                    </div>
                    
                </div>
            </div>

            
        </div>

    </div>
    <!-- footer -->
    <footer>
        <div class="menu">
            <div class="menu_area">
                <a href="./index.html">
                    <div class="menu_img"><img src="./img/home.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>首页</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./classify.html">
                    <div class="menu_img"><img src="./img/class.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>分类</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./discover.html">
                    <div class="menu_img"><img src="./img/discover.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>发现</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./profile.html">
                    <div class="menu_img"><img src="./img/person.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>我的</p>
                    </div>
                </a>
            </div>
        </div>
    </footer>

    <script>


        document.body.style.height = window.innerHeight + "px";

        /*动态改变根元素字体大小*/
        function recalc() {
            // 获取客户端宽度
            var clientWidth = document.documentElement.clientWidth;
            if (!clientWidth) return;
            // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
            document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';

        }

        function initRecalc() {
            recalc();
            // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();



    </script>
</body>

</html>